<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>减肥大师 - 数据追踪</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        .stats-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        
        .stats-period {
            display: flex;
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .period-btn {
            padding: 8px 12px;
            font-size: 14px;
            color: #6B7280;
        }
        
        .period-btn.active {
            background-color: #22C55E;
            color: white;
        }
        
        .summary-cards {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }
        
        .summary-card {
            background-color: white;
            border-radius: 12px;
            padding: 16px;
            position: relative;
            overflow: hidden;
        }
        
        .summary-card-icon {
            position: absolute;
            top: -10px;
            right: -10px;
            font-size: 48px;
            color: rgba(34, 197, 94, 0.1);
        }
        
        .summary-card-value {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .summary-card-label {
            font-size: 12px;
            color: #6B7280;
        }
        
        .summary-card-change {
            position: absolute;
            bottom: 16px;
            right: 16px;
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 12px;
        }
        
        .summary-card-increase {
            background-color: #DCFCE7;
            color: #16A34A;
        }
        
        .summary-card-decrease {
            background-color: #FEE2E2;
            color: #DC2626;
        }
        
        .chart-container {
            background-color: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .chart-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        
        .chart-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .chart-canvas {
            width: 100%;
            height: 220px;
        }
        
        .goal-progress {
            background-color: white;
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .goal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        
        .goal-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .goal-edit {
            color: #22C55E;
            font-size: 14px;
        }
        
        .goal-stats {
            display: flex;
            margin-bottom: 16px;
        }
        
        .goal-stat {
            flex: 1;
            text-align: center;
        }
        
        .goal-value {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .goal-label {
            font-size: 12px;
            color: #6B7280;
        }
        
        .goal-bar {
            height: 8px;
            background-color: #E5E7EB;
            border-radius: 4px;
            margin-bottom: 12px;
            overflow: hidden;
        }
        
        .goal-progress-fill {
            height: 100%;
            background-color: #22C55E;
            border-radius: 4px;
            width: 65%;
        }
        
        .history-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        
        .history-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .history-item {
            background-color: white;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }
        
        .history-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 16px;
            font-size: 18px;
        }
        
        .weight-icon {
            background-color: #DBEAFE;
            color: #3B82F6;
        }
        
        .food-icon {
            background-color: #FEF3C7;
            color: #F59E0B;
        }
        
        .exercise-icon {
            background-color: #DCFCE7;
            color: #22C55E;
        }
        
        .history-info {
            flex: 1;
        }
        
        .history-title {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .history-time {
            font-size: 12px;
            color: #6B7280;
        }
        
        .history-value {
            font-weight: 600;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <div class="phone-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-time">14:30</div>
            <div class="status-bar-icons">
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi"></i>
                <i class="fas fa-battery-three-quarters"></i>
            </div>
        </div>
        
        <!-- 导航栏 -->
        <div class="nav-bar">
            <div class="nav-title">数据追踪</div>
            <button class="nav-btn"><i class="fas fa-share-alt"></i></button>
        </div>
        
        <!-- 内容区域 -->
        <div class="content-container">
            <!-- 时间周期切换 -->
            <div class="stats-header">
                <h2 class="text-lg font-semibold">数据概览</h2>
                <div class="stats-period">
                    <button class="period-btn">周</button>
                    <button class="period-btn active">月</button>
                    <button class="period-btn">年</button>
                </div>
            </div>
            
            <!-- 数据摘要卡片 -->
            <div class="summary-cards">
                <div class="summary-card">
                    <div class="summary-card-icon">
                        <i class="fas fa-weight"></i>
                    </div>
                    <div class="summary-card-value">70.5 kg</div>
                    <div class="summary-card-label">当前体重</div>
                    <div class="summary-card-change summary-card-decrease">
                        <i class="fas fa-arrow-down"></i> 2.3 kg
                    </div>
                </div>
                
                <div class="summary-card">
                    <div class="summary-card-icon">
                        <i class="fas fa-running"></i>
                    </div>
                    <div class="summary-card-value">620</div>
                    <div class="summary-card-label">消耗卡路里</div>
                    <div class="summary-card-change summary-card-increase">
                        <i class="fas fa-arrow-up"></i> 15%
                    </div>
                </div>
                
                <div class="summary-card">
                    <div class="summary-card-icon">
                        <i class="fas fa-utensils"></i>
                    </div>
                    <div class="summary-card-value">1,850</div>
                    <div class="summary-card-label">平均摄入卡路里</div>
                    <div class="summary-card-change summary-card-decrease">
                        <i class="fas fa-arrow-down"></i> 8%
                    </div>
                </div>
                
                <div class="summary-card">
                    <div class="summary-card-icon">
                        <i class="fas fa-ruler"></i>
                    </div>
                    <div class="summary-card-value">24.3</div>
                    <div class="summary-card-label">BMI指数</div>
                    <div class="summary-card-change summary-card-decrease">
                        <i class="fas fa-arrow-down"></i> 0.8
                    </div>
                </div>
            </div>
            
            <!-- 体重变化图表 -->
            <div class="chart-container">
                <div class="chart-header">
                    <div class="chart-title">体重变化趋势</div>
                    <button class="text-green-500 text-sm">详情</button>
                </div>
                
                <canvas id="weightChart" class="chart-canvas"></canvas>
            </div>
            
            <!-- 目标进度 -->
            <div class="goal-progress">
                <div class="goal-header">
                    <div class="goal-title">目标进度</div>
                    <button class="goal-edit">编辑</button>
                </div>
                
                <div class="goal-stats">
                    <div class="goal-stat">
                        <div class="goal-value">70.5 kg</div>
                        <div class="goal-label">当前</div>
                    </div>
                    
                    <div class="goal-stat">
                        <div class="goal-value">3.5 kg</div>
                        <div class="goal-label">剩余</div>
                    </div>
                    
                    <div class="goal-stat">
                        <div class="goal-value">67 kg</div>
                        <div class="goal-label">目标</div>
                    </div>
                </div>
                
                <div class="goal-bar">
                    <div class="goal-progress-fill"></div>
                </div>
                
                <div class="text-sm text-gray-500 text-center">你已完成 65% 的减重目标，继续加油！</div>
            </div>
            
            <!-- 卡路里摄入图表 -->
            <div class="chart-container">
                <div class="chart-header">
                    <div class="chart-title">卡路里摄入 vs 消耗</div>
                    <button class="text-green-500 text-sm">详情</button>
                </div>
                
                <canvas id="caloriesChart" class="chart-canvas"></canvas>
            </div>
            
            <!-- 数据记录历史 -->
            <div>
                <div class="history-header">
                    <div class="history-title">最近记录</div>
                    <button class="text-green-500 text-sm">全部</button>
                </div>
                
                <div class="history-item">
                    <div class="history-icon weight-icon">
                        <i class="fas fa-weight"></i>
                    </div>
                    <div class="history-info">
                        <div class="history-title">体重记录</div>
                        <div class="history-time">今天 08:30</div>
                    </div>
                    <div class="history-value">70.5 kg</div>
                </div>
                
                <div class="history-item">
                    <div class="history-icon food-icon">
                        <i class="fas fa-utensils"></i>
                    </div>
                    <div class="history-info">
                        <div class="history-title">午餐记录</div>
                        <div class="history-time">今天 12:15</div>
                    </div>
                    <div class="history-value">480 卡</div>
                </div>
                
                <div class="history-item">
                    <div class="history-icon exercise-icon">
                        <i class="fas fa-running"></i>
                    </div>
                    <div class="history-info">
                        <div class="history-title">跑步记录</div>
                        <div class="history-time">昨天 18:40</div>
                    </div>
                    <div class="history-value">245 卡</div>
                </div>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tab-bar">
            <div class="tab-item" onclick="location.href='home.html'">
                <i class="tab-icon fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item" onclick="location.href='food-recognition.html'">
                <i class="tab-icon fas fa-camera"></i>
                <span>识别</span>
            </div>
            <div class="tab-item" onclick="location.href='diet-plan.html'">
                <i class="tab-icon fas fa-utensils"></i>
                <span>饮食</span>
            </div>
            <div class="tab-item" onclick="location.href='exercise-plan.html'">
                <i class="tab-icon fas fa-dumbbell"></i>
                <span>运动</span>
            </div>
            <div class="tab-item" onclick="location.href='profile.html'">
                <i class="tab-icon fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
    
    <script>
        // 更新状态栏时间
        function updateTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.querySelector('.status-bar-time').textContent = `${hours}:${minutes}`;
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateTime();
            setInterval(updateTime, 60000);
            
            // 周期按钮点击事件
            const periodBtns = document.querySelectorAll('.period-btn');
            periodBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    periodBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // 初始化体重变化图表
            const weightCtx = document.getElementById('weightChart').getContext('2d');
            const weightChart = new Chart(weightCtx, {
                type: 'line',
                data: {
                    labels: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
                    datasets: [{
                        label: '体重 (kg)',
                        data: [74.8, 74.1, 73.5, 72.8, 72.0, 71.2, 70.5],
                        backgroundColor: 'rgba(34, 197, 94, 0.1)',
                        borderColor: '#22C55E',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            min: 67,
                            max: 77,
                            ticks: {
                                stepSize: 2
                            }
                        }
                    }
                }
            });
            
            // 初始化卡路里图表
            const caloriesCtx = document.getElementById('caloriesChart').getContext('2d');
            const caloriesChart = new Chart(caloriesCtx, {
                type: 'bar',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [
                        {
                            label: '摄入',
                            data: [1950, 1870, 1800, 1920, 1790, 1850, 1880],
                            backgroundColor: '#3B82F6'
                        },
                        {
                            label: '消耗',
                            data: [2100, 2200, 2150, 2050, 2250, 2300, 2180],
                            backgroundColor: '#22C55E'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                            align: 'end'
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: false,
                            min: 1500
                        }
                    }
                }
            });
        });
    </script>
</body>
</html> 